import React, {Suspense, lazy} from 'react'
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom'

import Home from './pages/Home'
const CityList = lazy(() => import('./pages/CityList'))
const Map = lazy(() => import('./pages/Map'))
const HouseDetail = lazy(() => import('./pages/Details'))
const Login = lazy(() => import('./pages/Login'))
const Rent = lazy(() => import('./pages/Rent'))
const RentAdd = lazy(() => import('./pages/Rent/Add'))
const RentSearch = lazy(() => import('./pages/Rent/Search'))

const AuthRoute = lazy(() => import('./components/AuthRoute'))

export default () => {
  return (
    <Router>
      <Suspense fallback={<div className="loading">loading...</div>}>
        <Route exact path="/" render={()=><Redirect to="/home"></Redirect>}></Route>
        <Route path="/home" component={Home}></Route>
        <Route path="/citylist" component={CityList}></Route>
        <Route path="/map" component={Map}></Route>
        <Route path="/details/:id" component={HouseDetail}></Route>
        <Route path="/login" component={Login}></Route>

        {/* 房源发布相关页面 */}
        <AuthRoute path="/rent" exact component={Rent}></AuthRoute>
        <AuthRoute path="/rent/add" component={RentAdd}></AuthRoute>
        <AuthRoute path="/rent/search" component={RentSearch}></AuthRoute>
      </Suspense>
    </Router>
  )
}